<template>
  <view class="container">
    <view class="logo">
      <image src="/static//image/animal.png" mode="aspectFit"></image>
    </view>
	<view style="margin-bottom: 30rpx; font-weight: bold;color: #ff509d;">流浪动物之家</view>
    <view class="form">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
        <uni-forms-item label="账号" name="account">
          <uni-easyinput v-model="formData.account" placeholder="请输入账号" />
        </uni-forms-item>
        <uni-forms-item label="密码" name="password">
          <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>
	  <view style="padding: 20rpx 0;color: #ff509d;">
		  <view @click="forgetPassowrd" style="float: left;">
		  		<text>忘记密码</text>
		  </view>
		  <view style="float: right;" @click="toRegister">
			  <text>注册账号</text>
		  </view>
	  </view>
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {baseUrl} from '../../static/js/common.js'
import {onShow} from '@dcloudio/uni-app'



function forgetPassowrd(){
		uni.showModal({
			content:"请联系管理员邮箱 1720243553@qq.com"
		})
}

function toRegister(){
	uni.navigateTo({
		url:'/pages/register/register'
	})
}

// 表单数据
const formData = ref({
  account: '',
  password: ''
});

// 表单验证规则
const rules = ref({
  account: {
    rules: [
      { required: true, errorMessage: '请输入账号' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' }
    ]
  }
});

// 表单引用
const form = ref(null);

// 登录逻辑
const handleLogin = async () => {
  try {
    // 验证表单
    const valid= await form.value?.validate?.()
	uni.request({
		url: baseUrl + '/user/login',
		method:'POST',
		data:formData.value,
		success: (res) => {
			if(res.data.code==400){
				uni.showToast({
					title: res.data.msg,
					icon: 'fail'
				})
			}
			else if (res.data.code==200){
				uni.showToast({
				  title: '登录成功',
				  icon: 'success'
				});
				// 这里可以添加登录成功的逻辑，比如跳转到首页
				localStorage.setItem("userInfo",JSON.stringify(res.data.data))
				localStorage.setItem("token",res.data.data.token)
				uni.switchTab({
				  url: '/pages/home/home'
				});
			}
		}
	})
    
    
  } catch (err) {
    console.log('表单错误信息：', err);
  }
};

onShow(()=>{
	localStorage.removeItem("userInfo")
	localStorage.removeItem("token")
})
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.logo {
  margin-bottom: 40px;
}

.logo image {
  width: 100px;
  height: 100px;
}

.form {
  width: 100%;
  max-width: 400px;
}

.login-btn {
  margin-top: 20px;
  width: 100%;
  background-color: #ff509d;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}
</style>